<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="证书管理" -->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack">
        <template #right>
          <van-icon name="search" size="18" @click="showDialog = true"/>
        </template>
      </header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <lodding-card :isLodding="isLodding">
        <div class="warp_right">
          <refresh-list v-model:freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"
                        :resetScroll="resetScroll">
            <div v-for="item in goodsList">
              <van-cell-group inset @click="goItemInfo(item)">
                <van-cell title="证书编号" :value="item.documentCode" />
                <van-cell title="产品名称" :value="item.productName" />
                <van-cell title="产品型号" :value="item.productModel" />
                <van-cell title="证书状态" :value="item.documentState" />
                <van-cell title="归档状态" :value="item.fileState" />
              </van-cell-group>
            </div>
            <van-empty v-if="goodsList.length == 0" class="no_data" description="暂无数据" />
          </refresh-list>
        </div>
      </lodding-card>
    </div>
    <van-dialog v-model:show="showDialog" title="搜索内容" show-cancel-button>
      <van-form @submit="onSubmit">
          <van-field
              v-model="searchParams.documentCode"
              name="证书编号"
              label="证书编号"
              placeholder="证书编号"
          />
        <van-field
            v-model="searchParams.document"
            name="生产者"
            label="生产者"
            placeholder="生产者"
        />
        <van-field
            v-model="searchParams.productName"
            name="产品名称"
            label="产品名称"
            placeholder="产品名称"
        />
        <van-field
            v-model="searchParams.productModel"
            name="产品型号"
            label="产品型号"
            placeholder="产品型号"
        />
        <van-field
            v-model="searchParams.startTime"
            is-link
            readonly
            name="datePicker"
            label="发证时间(起)"
            placeholder="点击选择发证时间"
            @click="showPicker = true"
        />
        <van-field
            v-model="searchParams.endTime"
            is-link
            readonly
            name="datePicker"
            label="发证时间(始)"
            placeholder="点击选择结束时间"
            @click="showPicker = true"
        />
      </van-form>
    </van-dialog>
    <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
      <van-date-picker
          :model-value="pickerValue"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup name="Classify">
import {GET_DOCUMENT_LIST} from "@/api/cooperativeOffice/individualQuery"
const router = useRouter();
let resetScroll = ref(0); // 滚动记录
let isLodding = ref(true); // 是否加载中
const showDialog = ref(false); // 弹窗是否显示
// 分类列表
let goodsList = reactive([]); // 商品列表
let freshMap = reactive({
  refreshLoad: false, // 是否刷新
  listLoading: false, // 是否加载中
  listFinished: false, // 是否加载完成标识
});
// 搜索字段
const searchParams = reactive({
  dataTime: [], // 时间段
  documentCode:"",
  document:"",
  productName: "",
  productModel: "",
  startTime:"",
  endTime:"",
})

// 商品卡片参数

const classMap = reactive({
  refreshClass: "classify_refresh_box",
}); // 分类样式
const result = ref('');
const showPicker = ref(false);
const pickerValue = ref([]);
const onSubmit = () => {
  resetScroll.value = 1
  freshMap.listFinished = false;
  freshMap.listLoading = true;
  getPagelist();
}
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('/');
  pickerValue.value = selectedValues;
  showPicker.value = false;
};
//下拉刷新
const onRefresh = () => {
  resetScroll.value = 1
  freshMap.listFinished = false;
  freshMap.listLoading = true;
  getPagelist();
};

// 触底加载
const onLoad = () => {
  resetScroll.value = resetScroll.value + 1
  freshMap.listFinished = true;
  getPagelist(true);
};


//获取页面数据
const getPagelist = async (onLoad) => {
  // 每页显示的个数
  const pageSize = 10
  const res = await GET_DOCUMENT_LIST({
    currPage: resetScroll.value,
    pageSize: pageSize,
    ...searchParams
  });
  if (res?.code == 20000) {
    goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
    freshMap.refreshLoad = false;
    freshMap.listLoading = false;
    freshMap.listFinished = res?.data && res?.data.length < pageSize ;
  }
  isLodding.value = false;
};
const goBack = () => {
  router.go(-1);
};
const goItemInfo = (item) => {
  router.push({
    name: "certificateItemInfo",
    query: {
      itemInfo: JSON.stringify(item)
    },
  });
};
onMounted(async () => {
  getPagelist()
});
</script>
<style lang="less" scoped>
.list-item {
  margin: 10px;
  background-color: #ffff;
  padding: 5px;
  font-size: 14px;
}
.time {
  font-size: 12px;
  color: #AAAA;
}
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .warp_body {
    display: flex;

    .warp_left {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .warp_right {
      flex: 1;
    }
  }
}
</style>
